.menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 60px;
  &:hover {
    .menu-item__name {
      color: var(--mainColor);
      font-weight: bolder;
    }
  } 
  &::before {
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    width: 0px;
    transition: all 0.2s;
    background-color: var(--mainColor);
  }
  svg {
    width: 20px;
    margin: 0 20px 0 10px;
  }
  &--active {
    background-color: var(--mainColor);
    &::before {
      content: "";
      position: absolute;
      left: 0;
      height: 100%;
      width: 6px;
      transition: all 0.2s;
      background-color: var(--mainActiveColor);
    }
    .menu-item__name {
      color: #fff;
      font-weight: bolder;
    }
    &:hover {
      .menu-item__name {
        color: #fff;
      }
    } 
  }
 
}